<template>
  <section class="component tag-component">
    <div class="box">
      <el-tag
        v-for="item in tags"
        :key="item"
        class="tag"
        :closable="isClosable"
        @close="handleClose(tag)"
      >
        {{ item }}
      </el-tag>
    </div>
  </section>
</template>
<script lang="ts">
import { Vue, Component, Prop } from "vue-property-decorator";
@Component({
  components: {}
})
export default class TagComponent extends Vue {
  @Prop({ default: false, type: Boolean }) private isClosable;
  @Prop() private tags;

  private handleClose(tag) {
    this.tags.splice(this.tags.indexOf(tag), 1);
  }
}
</script>
<style lang="less">
.component.tag-component {
  .box {
    display: flex;
    flex-wrap:wrap;
    // padding: 10px 0;
    .tag {
      margin: 2px 6px;
    }
  }
}
</style>
